$(function () {

    // 需求一：获取文章数据，将其渲染至多选框下拉列表
    initArtCateList()
    //注意：多选框有默认样式无法去除，三方框架选择使用别的方法获取option数据设置样式
    function initArtCateList() {
        axios({
            method: 'GET',
            url: '/my/article/cates',
        }).then(({ data: res }) => {
            // console.log(res)
            if (res.status != 0) {
                return layui.layer.msg(res.message)
            }
            // 渲染文章数据至多选框下拉列表
            let arr = ['<option value="">请选择文章类别</option>']
            res.data.forEach(ele => {
                if (ele.Id > 0) {
                    arr.push(`<option value="${ele.Id}">${ele.name}</option>`)
                }
            })
            $('select').empty().html(arr.join(''))
            layui.form.render()
        })
    }

    // 需求二：初始化富文本编辑器
    /*
    1.富文本编辑器的展示标签为textarea
    2.导入修改textarea的js文件
    3.调用js中的方法渲染textarea，展示编辑效果
       方法一：initEditor()-->中文版本富文本编辑器
       方法二: 
    */
    initEditor()

    // 需求三：文章封面
    // 1. 初始化图片裁剪器
    var $image = $('#image')
    // 2. 裁剪选项
    var options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }
    // 3. 初始化裁剪区域
    $image.cropper(options)

    // 4.定义文章的发布状态-->
    let state = ''
    $('#btn1').on('click',function(){
        state = '已发布'
    })
    $('#btn2').on('click',function(){
        state = '草稿'
    })

    // 5.使用cropper插件实现图片预览
    $('#selectBtn').on('click',function(){
        $('#selectInp').click()
    })
    $('#selectInp').on('change',function(){
        if(!this.files[0]) return
        let newImgURL = URL.createObjectURL(this.files[0])
        $image.cropper('destroy').attr('src',newImgURL).cropper(options)
    })

    // 6.文章发布
    $('#formPub').on('submit',function(e){
        e.preventDefault()
        // 基于表单创建FormData对象，发送请求时需要使用FormData格式发送文件-->此时的fd中只有表单中的内容，其他内容需要手动添加
        let fd = new FormData(this)
        // 手动添加文章发布状态
        fd.append('state',state)
        // 将预览的文化在哪个方面转化为二进制格式-->接口文档需求，不是接受base64格式的字符串图片
        $image.cropper('getCroppedCanvas',{
            width:400,
            height:280
        }).toBlob(function(blob){
            // 此处回调函数接收的二进制图片是异步的，所以发起请求需要在回调函数内
            // 手动添加文章封面
            fd.append('cover_img',blob)
            console.log(...fd);
            // axios发送请求，传递文章数据
            axios({
                method:'POST',
                url:'/my/article/add',
                data:fd
            }).then(({data:res})=>{
                // console.log(res.status);
                if(res.status) return layui.layer.msg(res.message)
                // 发布成功后，定时跳转列表页
                layui.layer.msg('恭喜您，发布成功')
                // location.href = '/article/art_list.html'
                setTimeout(function(){
                    window.parent.document.querySelector('#art_list').click()
                },1500)
            })

            // jQuery发送请求，传递文章数据
            // $.post({
            //     url:'http://api-breakingnews-web.itheima.net/my/article/add',
            //     data:fd,
            //     headers:{
            //         authorization:localStorage.getItem('token')
            //     },
            //     contentType:false,//jq发送ajax请求会有默认的请求体格式(urlencoded)，需要禁用
            //     processData:false,//jq发送ajax请求会默认编码，也需要禁用
            //     success:function(res){
            //         console.log(res);
            //     }

            // })
        })
    })
})